const   gulp =require('gulp'),
        htmlmin =require('gulp-htmlmin'),
        cleanCss=require('gulp-clean-css'),
        autoprefixer = require('gulp-autoprefixer'),
        uglify = require('gulp-uglify'),
        babel = require('gulp-babel'),
        connect=require('gulp-connect'),
        del=require('del'),
        sass=require('gulp-sass'),
        { createProxyMiddleware } = require('http-proxy-middleware')

const paths={
    html:{
        src:'src/**/*.html',
        dest:'dist'
    },
    css:{
       src:'src/css/**/*.scss',
       dest:'dist/css' 
    },
    js:{
        src:'src/js/**/*.js',
        dest:'dist/js' 
     },
     imgs:{
         src:'src/images/**',
         dest:'dist/images'
     },
     libs:{
        src:'src/libs/**',
        dest:'dist/libs'
    }
}
const html=()=>{
    return gulp.src(paths.html.src)
           .pipe(htmlmin({
                removeComments: true,//清除HTML注释
                collapseWhitespace: true,//压缩HTML
                collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
                removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
                removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
                removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
                minifyJS: true,//压缩页面JS
                minifyCSS: true//压缩页面CSS 
           }))
           .pipe(gulp.dest(paths.html.dest))
           .pipe(connect.reload())
}
const css=()=>{
    return gulp.src(paths.css.src)
            .pipe(sass())
            .pipe(autoprefixer({
                cascade: false
              }))
            .pipe(cleanCss())
            .pipe(gulp.dest(paths.css.dest))
            .pipe(connect.reload())
}
 const js =()=>{
    return gulp.src(paths.js.src)
            .pipe(babel({
                presets: ['@babel/env']
              }))
            .pipe(uglify())
            .pipe(gulp.dest(paths.js.dest))
            .pipe(connect.reload())
 }
 const delDist=()=>{
   return  del('dist')
 }
 const imgs=()=>{
    return gulp.src(paths.imgs.src)
            .pipe(gulp.dest(paths.imgs.dest))
 }
 const libs=()=>{
    return gulp.src(paths.libs.src)
            .pipe(gulp.dest(paths.libs.dest))
 }
 const watch=()=>{
     gulp.watch(paths.html.src,html)
     gulp.watch(paths.css.src,css)
     gulp.watch(paths.js.src,js)
 }
 const sever=()=>{
     connect.server({
         root:'dist',
         port:2006,
         livereload:true,
        middleware(){
            return [
                createProxyMiddleware('/api', {
                    target: 'http://www.xiongmaoyouxuan.com',
                    changeOrigin: true
                  })
            ]
        }
     })
 }
    module.exports.default=gulp.series(delDist,gulp.parallel(html,css,js,imgs,libs,sever,watch))